<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <!--The viewport meta tag is used to improve the presentation and behavior
  of the samples on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"
  />
  <title>
      Spatial Query REST Client
  </title>
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dojox/grid/resources/Grid.css">
  <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dojox/grid/resources/claroGrid.css">
  <script type="text/javascript">
      djConfig = {
          parseOnLoad: true
      }
  </script>
  <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1">
  </script>
  <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("dojox.grid.DataGrid");
      dojo.require("dojo.data.ItemFileReadStore");

      var map;
      var grid;

      var soeURL = "http://localhost:6080/arcgis/rest/services/Yellowstone/MapServer/exts/SpatialQueryREST/SpatialQuery";


      function init() {
          map = new esri.Map("map");
          var imageParameters = new esri.layers.ImageParameters();
          var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Yellowstone/MapServer");
          map.addLayer(dynamicMapServiceLayer);
          dojo.connect(map, "onClick", mapClickHandler);
      }

   function mapClickHandler(evt) {
          var inPoint = new esri.geometry.Point(evt.mapPoint.x, evt.mapPoint.y, map.spatialReference);
          spatialQuery(inPoint);
      }

function spatialQuery(point) {
          distanceNumber = parseFloat(dojo.byId('bufferDistance').value);
          var content = {
              'location': "{x:" + point.x + ",y:" + point.y + "}",
              'distance': distanceNumber,
              'f': "json"
          };
          // Do the SOE query
          esri.request({
              url: soeURL,
              content: content,
              callbackParamName: "callback",
              load: function(response) {              
                  drawResponseGeometries(response.geometries);
                  responseRecordsToGrid(response.records);
              },
              error: function(error) {
                  console.log(error);
              }
          });
      }

function drawResponseGeometries(geometries) {
          map.graphics.clear();

          // Set all properties of the graphic outside the loop except the geometry
          var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NULL, 
		          new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, 
				  new dojo.Color([128, 0, 0]), 1), new dojo.Color([255, 0, 0]));
          var attr = {
              "Polygon": "Spatial Query result polygon"
          };
          var infoTemplate = new esri.InfoTemplate();
          var sr = new esri.SpatialReference({
              wkid: 26712
          }); //NAD_1927_UTM_Zone_12N 
          // Loop through all graphics in the JSON
          for (var i = 0, il = geometries.length; i < il; i++) {
              // Make a new polygon
              var polygon = new esri.geometry.Polygon(sr);

              // Loop through all rings in the JSON and add to polygon
              for (var j = 0, jl = geometries[i].rings.length; j < jl; j++) {
                  polygon.addRing(geometries[i].rings[j]);
              }

              // Create a graphic from the polygon and add it to the map
              var currentGraphic = new esri.Graphic(polygon, symbol, attr, infoTemplate);
              map.graphics.add(currentGraphic);
          }

      }

      function responseRecordsToGrid(records) {
         
          var data = {
              items: records
          };
          var store = new dojo.data.ItemFileReadStore({
              data: data
          });
    
          grid.setStore(store);
      }


     
      dojo.addOnLoad(init);
  </script>
</head>

<body class="claro">
  Buffer distance (in meters):&nbsp;
  <input type="text" id="bufferDistance" value="10000" size="5" />
  <div id="map" style="width:400px; height:300px; border:1px solid #000;">
  </div>
 
  <div style="width:100%;height:500px;">
      <table dojoType="dojox.grid.DataGrid" jsid="grid" id="gridDiv">
          <thead>
              <tr>
                  <th field="veg" width="200px;">
                      Vegetation Type
                  </th>
                  <th field="value" width="200px;">
                      Square meters
                  </th>
              </tr>
          </thead>
      </table>
  </div>
</body>

</html>
